<template>
	<view class="login">
		<div class="pure_top"></div>
		<image class="logo" src="../static/images/logo.png" mode=""></image>
		<u-row gutter="200">
			<u-col span="12">
				<u-tabs name="cate_name" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</u-col>
		</u-row>
		<view class="content" v-if="current == 0">
			<u-row gutter="150">
				<u-col span="12">
					<u-form :model="account">
						<u-form-item :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_phone.png">
							<u-input maxlength="11"  placeholder="请输入手机号" placeholderStyle="color: #D9D9D9" v-model="account.mobile" />
						</u-form-item>
						<u-form-item :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_pass.png">
							<u-input type="password" placeholder="请输入密码" placeholderStyle="color: #D9D9D9" v-model="account.password" />
						</u-form-item>
					</u-form>
					<view class="submit">
						<u-button type="primary" shape="circle" @click="accountSubmit">登录</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<view class="content" v-if="current == 1">
			<u-row gutter="150">
				<u-col span="12">
					<u-form :model="codeList">
						<u-form-item :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_phone.png">
							<u-input maxlength="11" placeholder="请输入手机号" placeholderStyle="color: #D9D9D9" v-model="codeList.mobile" />
						</u-form-item>
						<u-form-item :left-icon-style="{width: '24rpx', height: '26rpx'}" left-icon="https://323928-project-supervision.oss-cn-beijing.aliyuncs.com/login_code.png">
							<u-input  placeholder="请输入验证码" placeholderStyle="color: #D9D9D9" v-model="codeList.code" />
						  <u-button size="mini" slot="right" type="primary" @click="getCode">{{codeText}}</u-button>
						</u-form-item>
						<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
					</u-form>
					<view class="submit">
						<u-button type="primary" shape="circle" @click="codeSubmit">登录</u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="bottom-tip">
			还没有账号？<text class="register" @click="registerClick">马上注册</text>                    
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import config from "@/tools/config.js";
	export default {
		name: 'login',
		data() {
			return {
				list: [{
					cate_name: '密码登录'
				}, {
					cate_name: '验证码登录'
				}],
				current: 0,
				// 密码登录
				account: {
					mobile: '',
					password: ''
				},
				// 验证码登录
				codeList: {
					mobile: '',
					code: ''
				},
				codeText: '',
				key: '', // 发送验证码后的key
			}
		},
		onLoad() {
			//获取租户ID
			let tenantId = uni.getStorageSync("tenantId") || '';
			// console.log('租户id:' + tenantId)
			if(!tenantId) this.getTenantId()
		},
		methods: {
			// 获取租户id
			getTenantId() {
				let _this = this;
				// setTimeout(function() {
				//   this.$u.toast('信息加载中...');
				// }, config.loadingTimeOut);
				this.$ajax
					.get({
						url: '/blade-system/tenant/info?domain=http://project-supervision.sdhuan.cn'
					})
					.then(res => {
						// console.log(res);
						if (res.code == 200) {  
							try {
								if(res.data.tenantId){
									uni.setStorageSync('tenantId', res.data.tenantId);
								}                                  
							}catch (e) {}                            
						} else {}
					});
			},
			// 切换登录方式
			change(index) {
				this.current = index;
			},
			// 密码登录提交
			accountSubmit() {
				let that = this
				let  tenantId = uni.getStorageSync("tenantId") || '';
				if(!tenantId) {
					that.getTenantId()                    
					return;
				}
				if(that.$check.isMobile(that.account.mobile) == false) {
					that.$refs.uToast.show({
						title: '请正确填写手机号',
						type: 'error'
					})
				} else if(that.account.mobile && that.account.password) {
					let dataList = {
						username: that.account.mobile,
						tenantId: tenantId,
						password: this.$md5(that.account.password)
					}
					let header = {
						 "content-type":"application/x-www-form-urlencoded;charset=UTF-8"
					}
					this.$ajax.post({
						url: '/blade-auth/oauth/token',
						data: dataList,
						header: header
					}).then(res => {
						// console.log(res)
						if(res.account) {
							this.$refs.uToast.show({
								title: '登陆成功',
								type: 'success'
							})
							this.$store.commit('saveUserInfo', res) // 存储到store
							try {
								uni.setStorageSync('isUserTrue', 'true');
								uni.setStorageSync('token', res.access_token);						
							} catch (e) {
							  // error
							}                            
							this.$navJump.reLaunch('/pages/index/index');		
						} else if(res.code == 400){
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						} else {
							this.$refs.uToast.show({
								title: res.error_description,
								type: 'error'
							})
						}
					})
				} else {
					that.$refs.uToast.show({
						title: '手机号或密码不得为空',
						type: 'error'
					})
				}
			},
			// 验证码提交
			codeSubmit() {
				let  tenantId = uni.getStorageSync("tenantId") || '';
				if(!tenantId) {
					that.getTenantId()                    
					return;
				}
				if(this.$check.isMobile(this.codeList.mobile) == false) {
					this.$refs.uToast.show({
						title: '请正确填写手机号',
						type: 'error'
					})
				} else if(this.codeList.mobile && this.codeList.code) {
					let dataList = {
						username: this.codeList.mobile,
						tenantId: tenantId
					}
					this.$ajax.post({
						url: '/blade-auth/oauth/token?grant_type=sms',
						data: dataList,
						header: {
							'Sms-Captcha-Key': this.key,
							'Sms-Captcha-Code': this.codeList.code,
							"content-type":"application/x-www-form-urlencoded;charset=UTF-8",
						}
					}).then(res => {
						// console.log(res)
						if(res.account) {
							this.$refs.uToast.show({
								title: '登陆成功',
								type: 'success'
							})
							this.$store.commit('saveUserInfo', res) // 存储到store
							try {
								uni.setStorageSync('isUserTrue', 'true');
								uni.setStorageSync('token', res.access_token);						
							} catch (e) {
							  // error
							}                            
							this.$navJump.reLaunch('/pages/index/index');		
						} else if(res.code == 400){
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						} else  {
							this.$refs.uToast.show({
								title: res.error_description,
								type: 'error'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '手机号或验证码不得为空',
						type: 'error'
					})
				}
			},
			// 验证码操作
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(this.$check.isMobile(this.codeList.mobile) == false) {
					this.$refs.uToast.show({
						title: '请正确填写手机号',
						type: 'error'
					})
				} else {
					if(this.$refs.uCode.canGetCode) {
					// 向后端请求验证码
					this.$ajax.post({
						url: `/blade-auth/oauth/sendCode/${this.codeList.mobile}`
					}).then(res => {
						// console.log(res)
						if(res.code == 200) {
							uni.showLoading({
								title: '正在获取验证码'
							})
							setTimeout(() => {
								uni.hideLoading();
								this.$refs.uToast.show({
									title: '验证码发送成功',
									type: 'success'
								})
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}, 1000);
							this.key = res.data
						} else{
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
					.catch(res => {
						console.log(res)
					})
					}else {
						this.$refs.uToast.show({
							title: '倒计时结束后再发送',
							type: 'warning'
						})
					}
				}
			},
			// 跳转到注册页面
			registerClick() {
				this.$navJump.navigateTo('./register')
			}
		},
		onShow() {
			// 去除左上角小房子图标
			wx.hideHomeButton()
		},
		// 分享给朋友
		onShareAppMessage(res) {
			return {
				title: '分享小程序给朋友',
				path: '/pages/index/index'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		.pure_top {
			width: 100%;
			height: 126rpx;
			position: relative;
			z-index: -1;
			overflow: hidden;
		}
		.pure_top::after {
			content: '';
			width: 100%;
			height: 126rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			border-radius: 0 0 80% 80%;
			background: #3B85FE;
		}
		.logo{
			width: 28%;
			height: 204rpx;
			margin: -90rpx 36% 20rpx;
		}
		.content {
			margin-top: 40rpx;
		}
		.submit {
			margin-top: 140rpx;
			/deep/.u-btn--primary{
				background:linear-gradient(to right ,#3B85FE, #3BC0FE)!important
			}
		}
    .bottom-tip {
			position: fixed;
			bottom: 4%;
			text-align: center;
			width: 100%;
			color: #B5B5B5;
			text {
				color: #3C86FE;
			}
		}
	}
	/deep/.u-form-item--left__content__icon {
		margin-bottom: -12rpx;
	}
	@media screen and (min-height: 850px) {
		.bottom-tip {
			bottom: 5%;
		}
	}
</style>
